<template>
	<view class="customer">
		<view class="top_box">
			<view class="top">
				<view class="hlogo">
					<view class="himg">
						<image class="hp" :src="info.imageUrl" mode=""></image>
					</view>
					<view class="name_box">
						<view class="name">
							{{info.name}}
						</view>
						<view class="id_box">
							<!-- ID：{{info.id}} -->
							<view class="id_box_left">
								牛果：{{Number(info.integral || 0)}}
							</view>
							<view class="id_box_right">
								预估佣金：{{Number(info.projectionsCommissions || 0).toFixed(2)}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="info.clubLeader==1" class="info_list">
				<view class="info_item">
					<view class="info_name">
						我的团队
					</view>
					<view class="info_num">
						{{info.customerNum}}
					</view>
				</view>
				<view class="info_item">
					<view class="info_name">
						今日新增
					</view>
					<view class="info_num">
						{{info.todayAddCustomerNum}}
					</view>
				</view>
			</view>
		</view>

		<view class="mid">
			<text style="color: #EC5050;font-weight: bold;">—</text>
			<text style="margin: 15rpx;font-size: 32rpx;">我的团队</text>
			<text style="color: #EC5050;font-weight: bold;">—</text>
		</view>
		<u-tabs @click="tabsClick" :list="list2"></u-tabs>
		<view v-if="type == 0">
			<uni-datetime-picker return-type="date" style="margin: 20upx 0;" :hide-second="true" v-model="datetimerange" type="daterange"
				@change="change" rangeSeparator="至" />
			<view class="list_content">
				<view v-for="(item,index) in list" :key="index" class="item">
					<view class="left">
						<image :src="item.imageUrl" mode=""></image>
						<view class="item_info">
							<view class="name">
								{{item.name}}
							</view>
							<view class="id">
								真实姓名:{{item.realName}}
							</view>
						</view>
					</view>
					<view class="right">
						<div>{{item.integral}}牛果</div>
						<div style="text-align: right;">{{item.subordinate | subordinate}}</div>
					</view>
				</view>
			</view>
			<u-loadmore @loadmore="getmore()" :load-text="loadText" :status="queryObj.status" />
		</view>
		<view v-if="type == 1">
			<uni-datetime-picker return-type="date" style="margin: 20upx 0;" :hide-second="true" v-model="datetimeranget" type="daterange"
				@change="change" rangeSeparator="至" />
			<view class="list_content">
				<view v-for="(item,index) in listT" :key="index" class="item">
					<view class="left">
						<image :src="item.imageUrl" mode=""></image>
						<view class="item_info">
							<view class="name">
								{{item.name}}
							</view>
							<view class="id">
								真实姓名:{{item.realName}}
							</view>
						</view>
					</view>
					<view class="right">
						<div>{{item.projectionsCommissions}}佣金</div>
						<div style="text-align: right;">{{item.subordinate|subordinate}}</div>
					</view>
				</view>
			</view>
			<u-loadmore @loadmore="getmoret()" :load-text="loadText" :status="queryObjt.status" />
		</view>
	</view>
</template>

<script>
	var that;
	import {
		getpai,
		bootpointsrecordself,
		commissionsrecordteamlist
	} from '@/api/mine'
	export default {
		data() {
			return {
				list2: [{
					name: '牛果',
					id: 0
				}, {
					name: '佣金',
					id: 1
				}],
				datetimerange: [],
				type: 0,
				src: "../../static/tabsIcon/headlogo.png",
				top: [],
				info: [],
				list: [],
				listT: [],
				datetimeranget: [],
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中...',
					nomore: '没有更多了'
				},
				queryObj: {
					status: 'loadmore',
					page: 1,
					size: 30,
					startTime: '',
					endTime: '',
					total: 0,
				},
				queryObjt: {
					status: 'loadmore',
					page: 1,
					size: 30,
					startTime: '',
					endTime: '',
					total: 0,
				}
			}
		},
		filters: {
			times(value) {
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '-' + MM + '-' + d;
				return timer;
			},
			subordinate(text){
				console.log(text)
				if (text == 0) {
					return "";
				}
				if (text == 1) {
					return "下级";
				}
				if (text == 2) {
					return "团员";
				}
			}
		},
		onReachBottom() {
			if (this.type == 0) {
				if ((this.queryObj.page * this.queryObj.size) >= this.queryObj.total) {
					this.queryObj.status = 'nomore'
					return
				};
				this.queryObj.status = 'loading';
				this.getmore();
			} else {
				if ((this.queryObjt.page * this.queryObjt.size) >= this.queryObjt.total) {
					this.queryObjt.status = 'nomore'
					return
				};
				this.queryObjt.status = 'loading';
				this.getmoret();
			}
		},
		onLoad() {
			that = this;
			this.bootpointsrecordself();
			this.getlist();
			this.commissionsrecordteamlist();
		},
		methods: {
			tabsClick(e) {
				console.log(e)
				this.type = e.id
			},
			change(e) {
				console.log(e)
				if (this.type == 0) {
					this.queryObj.startTime = (e[0] || '')
					this.queryObj.endTime = (e[1] || '')
					this.queryObj.page = 1
					this.queryObj.total = 0
					this.queryObj.status = 'loadmore'
					this.list = []
					this.getlist();
				} else {
					this.queryObjt.startTime = (e[0] || '')
					this.queryObjt.endTime = (e[1] || '')
					this.queryObjt.page = 1
					this.queryObjt.total = 0
					this.queryObjt.status = 'loadmore'
					this.listT = []
					this.commissionsrecordteamlist();
				}
			},
			commissionsrecordteamlist() {
				let data = {
					pageNum: this.queryObjt.page,
					pageSize: this.queryObjt.size,
					startTime:this.queryObjt.startTime,
					endTime:this.queryObjt.endTime,
				}
				commissionsrecordteamlist(data).then(res => {
					if (res.success == 1) {
						if (this.queryObjt.page == 1) {
							this.listT = res.data.records;
						} else {
							this.listT.push(...res.data.records)
						}
						this.queryObjt.total = res.data.total;
						if ((this.queryObjt.page * this.queryObjt.size) >= this.queryObjt.total) {
							this.queryObjt.status = 'nomore'
						} else {
							this.queryObjt.status = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			bootpointsrecordself() {
				bootpointsrecordself().then(res => {
						if (res.success == 1) {
							this.info = res.data;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch(err => {

					});
			},
			getmore() {
				if ((this.queryObj.page * this.queryObj.size) >= this.queryObj.total) {
					this.queryObj.status = 'nomore'
					return
				};
				this.queryObj.status = 'loading';
				this.queryObj.page = this.queryObj.page + 1;
				this.getlist();
			},
			getmoret() {
				if ((this.queryObjt.page * this.queryObjt.size) >= this.queryObjt.total) {
					this.queryObjt.status = 'nomore'
					return
				};
				this.queryObjt.status = 'loading';
				this.queryObjt.page = this.queryObjt.page + 1;
				this.commissionsrecordteamlist();
			},
			getlist() {
				let data = {
					pageNum: this.queryObj.page,
					pageSize: this.queryObj.size,
					startTime: this.queryObj.startTime,
					endTime: this.queryObj.endTime,
				}
				getpai(data).then(res => {
					if (res.success == 1) {
						if (this.queryObj.page == 1) {
							this.list = res.data.records;
						} else {
							this.list.push(...res.data.records)
						}
						this.queryObj.total = res.data.total;
						if ((this.queryObj.page * this.queryObj.size) >= this.queryObj.total) {
							this.queryObj.status = 'nomore'
						} else {
							this.queryObj.status = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f4f4f4;
	}

	.customer {
		padding: 20rpx;
	}

	.top_box {
		background: url(../../static/tabsIcon/club/clubbg.png) no-repeat;
		color: #FFFFFF;
		background-size: 100% 100%;
		border-radius: 20rpx;
		padding: 40rpx;

		.top {
			.hlogo {
				display: flex;
				color: #FFFFFF;

				.himg {
					position: relative;
					margin-right: 30rpx;

					.hp {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						overflow: hidden;
					}
				}

				.name_box {
					text-align: left;

					.name {
						text-align: left;
						margin-bottom: 5rpx;
					}

					.id_box {
						font-size: 24rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.id_box_left {}

						.id_box_right {
							margin-left: 40upx;
						}
					}
				}

			}


		}

		.info_list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 66rpx;
			font-size: 28rpx;
			text-align: center;

			.info_name {
				margin-bottom: 10rpx;
			}
		}
	}

	.mid {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx;
	}

	.list_content {
		margin-top: 10rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-right: 15rpx;
					border-radius: 50%;
				}

				.name {
					color: #333333;
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}

				.id {
					color: #999999;
					font-size: 24rpx;
				}
			}

			.right {
				font-size: 24rpx;
				color: #999999;
			}

		}
	}
</style>
